import React from "react"

import { SystemLogo } from "@/components/common/SystemLogo"
import { useLocale } from "@/locales"

import { GlobalTitle, WrapperLink, WrapperSystemLogo } from "./index.styled"

interface GlobalLogoProps {
	/** 显示名字 */
	$showtitle: boolean
	/** 显示logo */
	$showlogo?: boolean
	styleGlobalLogo?: React.CSSProperties
	isHomePage?: boolean
}

export const GlobalLogo: React.FC<GlobalLogoProps> = ({ $showtitle = true, $showlogo = true, styleGlobalLogo, isHomePage }) => {
	const siteName = import.meta.env.VITE_APP_TITLE
	const { newFormat } = useLocale()
	return isHomePage ? (
		<div style={{ width: "100%", display: "flex", justifyContent: "center", alignItems: "center" }}>
			<SystemLogo
				color="#409eff"
				iconStyle={{
					width: 80,
					height: 80
				}}
			/>
			<div style={{ fontSize: "36px" }}>{newFormat({ id: siteName })}</div>
		</div>
	) : (
		<WrapperLink style={styleGlobalLogo} href={"/home"}>
			<WrapperSystemLogo $showlogo={$showlogo}>
				<SystemLogo
					color="#409eff"
					iconStyle={{
						width: 40,
						height: 40
					}}
				/>
			</WrapperSystemLogo>
			<GlobalTitle $showtitle={$showtitle} level={2}>
				{newFormat({ id: siteName })}
			</GlobalTitle>
		</WrapperLink>
	)
}
